<template>
  <div>
    <chart :options="options" :height="220" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import storage from '@/utils/storage'

const dataSet = [
  storage.getItem('subject'),
  [80, 90, 100, 80, 70, 70, 75]
]

const options = {
  grid: {
    top: '10%',
    bottom: '10%',
    left: 0,
    right: 0
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: true
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#fff'
    },
    splitLine: {
      show: false
    },
    data: dataSet[0]
  },
  yAxis: {
    type: 'value',
    show: false,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: 'rgba(255,255,255, 0.5)'
    },
    splitLine: {
      show: false,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
        width: 2
      }
    }
  },
  series: [
    {
      data: dataSet[1],
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        barBorderRadius: [20, 20, 0, 0],
        // color: 'transparent',
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [{
            offset: 0,
            color: '#7acaec'
          },
          {
            offset: 1,
            color: '#1FC7FF'
          }
          ]
        ),
        borderColor: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [{
            offset: 0,
            color: '#7acaec'
          },
          {
            offset: 1,
            color: '#1FC7FF'
          }
          ]
        ),
        borderWidth: 2,
        shadowColor: '#1FC7FF',
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0
      },
      label: {
        normal: {
          show: true,
          lineHeight: 20,
          width: 70,
          height: 20,
          borderRadius: 200,
          position: ['-10', '-25'],
          distance: 2,
          formatter: [
            ' {a|{c}%}     \n',
            '    {b|}'
          ].join(''),
          rich: {
            d: {
              color: '#3CDDCF'
            },
            a: {
              color: '#1FC6FF',
              align: 'center'
            },
            b: {
              width: 1,
              height: 30,
              borderWidth: 0,
              borderColor: '#234e6c',
              align: 'left'
            }
          }
        }
      }
    }
  ]
}

export default {
  name: 'bar-chart',
  data () {
    return {
      options: options
    }
  },
  mounted () {
    setTimeout(() => {
      this.initData()
    }, 500)
  },
  methods: {
    initData () {
      const data = this.$db.select('achievement')
      data.onsuccess = (res) => {
        let score = res.target.result.reduce((prev, item) => {
          const score = item.score
          let index = 0
          for (const key in score) {
            const value = score[key]
            if (value >= 60) {
              prev[index] = (prev[index] * 1 || 0) + 1
            }
            index++
          }
          return prev
        }, [])
        score = score.map(item => {
          return (item / res.target.result.length * 100).toFixed(2)
        })
        this.options.series[0].data = score
        // this.options = options
        // console.log(score, res.target.result.length)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
